<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gBody>
			<!-- *** *** ** 必须要的，扫码逻辑 不要删！！！！！ -->
			<scanCode></scanCode>

			<view class="inventory">
				<!-- 第一模块 轮播图 -->
				<!-- <view class="inventory_title">
          <view class="uni-margin-wrap">
            <swiper class="swiper" circular :indicator-dots="data.indicatorDots" :autoplay="data.autoplay"
              :interval="data.interval" :duration="data.duration">
              <swiper-item>
                <image class="swiper-item"
                  src="http://screen.bjdnlsj.com/afl-app/img/202209061548160437_admin.jpg">
                </image>
              </swiper-item>
              <swiper-item>
                <image class="swiper-item"
                  src="http://screen.bjdnlsj.com/afl-app/img/202209061549080970_admin.jpg">
                </image>
              </swiper-item>
              <swiper-item>
                <image class="swiper-item"
                  src="http://screen.bjdnlsj.com/afl-app/img/202209061549230289_admin.jpg">
                </image>
              </swiper-item>
              <swiper-item>
                <image class="swiper-item"
                  src="http://screen.bjdnlsj.com/afl-app/img/202209061549430404_admin.jpg">
                </image>
              </swiper-item>
              <swiper-item>
                <image class="swiper-item"
                  src="http://screen.bjdnlsj.com/afl-app/img/202209061550000024_admin.jpg">
                </image>
              </swiper-item>
              <swiper-item>
                <image class="swiper-item"
                  src="http://screen.bjdnlsj.com/afl-app/img/202209061550220763_admin.jpg">
                </image>
              </swiper-item>
            </swiper>
          </view>
        </view> -->

				<!-- 库存显示 -->
				<view class="repertory">
					<!-- 搜索 -->
					<view class="repertory_search" @click="goInventory">
						<image class="repertory_search_img"
							src="http://screen.bjdnlsj.com/afl-app/img/202210200852500182_admin.png">
						</image>
						<view class="repertory_search_select">
							<image class="repertory_select_img"
								src="http://screen.bjdnlsj.com/afl-app/img/202210200914570644_admin.png">
							</image>
							<view class="repertory_search_input">{{ $t('materials.queryCommodityInvent') }}</view>
						</view>
					</view>
					<view class="repertory_amount">
						<view class="repertory_amount_number">{{ data.inventoryList.finishedQTY  || 0 }}/<text style="font-size:18rpx">{{ $t('materials.box') }}</text></view>
						<view class="repertory_amount_title">{{ $t('materials.totalFinishedGoods') }}</view>
					</view>
					<view class="repertory_monthList">
						<view class="repertory_monthList_left">
							<view class="repertory_monthList_number">{{ data.inventoryList.inboundQTY || 0 }}/<text style="font-size:18rpx">{{ $t('materials.box') }}</text></view>
							<view class="repertory_monthList_title">{{ $t('materials.qtyOfThisMonth') }}</view>
						</view>
						<view class="repertory_monthList_right">
							<view class="repertory_monthList_number">{{ data.inventoryList.outgoingQTY || 0 }}/<text style="font-size:18rpx">{{ $t('materials.box') }}</text></view>
							<view class="repertory_monthList_title">{{ $t('materials.qtyOutThisMonth') }}</view>
						</view>
					</view>
					<!-- 第三模块 图标 -->
					<view class="inventory_icons">
						<view class="inventory_icons_list">
							<view class="inventory_icons_item" v-for="(x, i) in data.icons" :key="i"
								@click="goPage(x.path)">
								<image class="inventory_icons_img" :src="x.imgPath"></image>
								<view class="inventory_icons_desc">{{ x.text }}</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 第二模块 提示信息 消息通知 -->
				<view class="not-msg-box">
					<view class="not-msg-box-left">
						<image class="item-icon" src="@/static/tabBar/annunciate-active.png" alt="" />
					</view>
					<swiper class="swiper-two" :autoplay="true" :interval="2000" :duration="700" :vertical="true"
						:circular="true">
						<swiper-item v-for="(x, i) in data.notMsgList" :key="i">
							<view class="swiper-item-two" @click="getMore">{{ x.messageTitle }}</view>
						</swiper-item>
					</swiper>
					<view class="not-msg-box-right" @click="getMore">
						<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
					</view>
				</view>

				<!-- 第四模块  单据查看 -->
				<view class="receipts" id="receipt" :style="{height:data.cssText}">
					<view class="receipts_header">
						<view class="receipts_header_title">{{ $t('materials.checkTheDoc') }}</view>
						<!-- <view class="receipts_header_pulldown" id="pulldowns" @click="pulldown"></view> -->
						<view class="card-rotating" @click.stop="pulldown">
							<uni-icons v-if="!data.showPull" type="bottom" color="#9C9C9C" size="20"></uni-icons>
							<uni-icons v-if="data.showPull" type="top" color="#9C9C9C" size="20"></uni-icons>
						</view>
					</view>
					<view class="receipts_card">
						<view class="receipts_card_item" v-for="(x, i) in data.receipts" :key="i"
							@click="goPage(x.path)">
							<image class="receipts_card_icon" :src="x.imgPath"></image>
							<view class="receipts_card_topic">{{ x.text }}</view>
						</view>
					</view>
				</view>

				<!-- 图表 -->
				<view class="chart">
					<view class="chart_title">{{ $t('JsInternational.ofStock') }}</view>
					<view class="chart_number">
						<view class="chart_number_title">{{ $t('JsInternational.amount') }}</view>
						<view class="chart_number_desc">{{ data.pineTotal || 0 }}</view>
					</view>
					<view class="chart_number" style="background-color:#cab6b5">
						<view class="chart_number_title">{{ $t('JsInternational.totalStockCount') }}</view>
						<view class="chart_number_desc">{{ data.totalTrusts || 0 }}</view>
					</view>
					<view class="chart_picture">
						<qiun-data-charts :animation="false" type="ring" :opts="data.ringOpts"
							:chartData="data.ringChartData" />
					</view>
				</view>

				<view class="chart">
					<view class="chart_title">{{ $t('JsInternational.stockoutStatistic') }}</view>
					<view class="chart_number">
						<view class="chart_number_title">{{ $t('JsInternational.amountOfStockout') }}</view>
						<view class="chart_number_desc">{{ data.lineTotal || 0 }}</view>
					</view>
					<view class="chart_number" style="background-color:#cab6b5">
						<view class="chart_number_title">{{ $t('materials.stockoutAmt') }}</view>
						<view class="chart_number_desc">{{ data.tQTY || 0 }}</view>
					</view>
					<!-- :animation="false" 关闭charts动画防止兼容问题 -->
					<view class="chart_picture">
						<qiun-data-charts :animation="false" type="line" :opts="data.lineOpts"
							:chartData="data.lineChartData" />
					</view>
				</view>

			</view>
		</template>
	</gui-page>
</template>

<script setup>
	// 引入文件
	import {
		onMounted,
		ref,
		reactive
	} from "vue";
	// 引入跳转相关的路由
	import {
		switchTab,
		navigate
	} from "@/utils/routerSkip.js";
	import scanCode from "@/components/scan-code/scan-code.vue";
	import wybNoticeBar from '@/components/wyb-noticeBar/wyb-noticeBar.vue'
	import {
		IMG_BASE_URL
	} from "@/constant/config.js"
	import {
		listBizMessageByUserNameId,
		updateReadFlag,
		getNotReadHomeMsg,
		getPADIndexData,
		getPdaLineGraph,
		getPdaReportData
	} from '@/api/api.js'
	import {
		onShow,onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		USERINFO
	} from '@/constant/index.js'

	//国际化引入
	import {
		useI18n
	} from 'vue-i18n';
	const {
		t
	} = useI18n();

	const baseUrl = IMG_BASE_URL;

	components: {
		scanCode,
		wybNoticeBar
	}
	let data = reactive({
		notMsgText: '', // 通知消息
		notMsgList: [],
		indicatorDots: true, //轮播图的属性
		autoplay: true,
		interval: 4000,
		duration: 1000,

		icons: [{ //图标列表变量
			path: '/pages/application/index',
			text: 'WMS',
			imgPath: baseUrl + '/afl-app/img/202208291051090451_admin.png'
		}, {
			path: '/pages/application/qmsApplication',
			text: 'QMS',
			imgPath: baseUrl + '/afl-app/img/202208310917390505_admin.png'
		}, {
			path: '/pages/application/mesApplication',
			text: 'MES',
			imgPath: baseUrl + '/afl-app/img/202208291422350498_admin.png'
		}, {
			path: '/pages/application/wscApplication',
			text: 'INV',
			imgPath: baseUrl + '/afl-app/img/202211281519480836_admin.png'
		}, {
			path: '/pages/sopPage/sopList',
			text: 'SOP',
			imgPath: baseUrl + '/afl-app/img/202209061626020739_admin.png'
		}, {
			path: '/pages/application/restsApplication',
			text: t('materials.other'),
			imgPath: baseUrl + '/afl-app/img/202209061543580799_admin.png'
		}],

		receipts: [{ //单据查看图标列表变量
			path: '/pages/invoices/purchaseInvoices',
			text: t('purchaseReturn.purchaseReceipt'),
			imgPath: baseUrl + '/afl-app/img/202211011359280175_admin.png'
		}, {
			path: '/pages/invoices/salesOutgoingList',
			text: t('materials.salesOutgoing'),
			imgPath: baseUrl + '/afl-app/img/202211011358300205_admin.png'
		}, {
			path: '/pages/invoices/distributedInboundOrder',
			text: t('materials.distributedInboundOrder'),
			imgPath: baseUrl + '/afl-app/img/202211011356390578_admin.png'
		}, {
			path: '/pages/invoices/distributedCallOut',
			text: t('JsInternational.distributedCall'),
			imgPath: baseUrl + '/afl-app/img/202211011401300604_admin.png'
		}, {
			path: '/pages/invoices/otherOutgoingList',
			text: t('materials.otherOutgoingList'),
			imgPath: baseUrl + '/afl-app/img/202211011353500632_admin.png'
		}, {
			path: '/pages/invoices/purchaseReturnOrder',
			text: t('materials.purchaseReturnOrder'),
			imgPath: baseUrl + '/afl-app/img/202211011355110175_admin.png'
		}, {
			path: '/pages/invoices/singleProduction',
			text: t('translationImage.simpleMaterial'),
			imgPath: baseUrl + '/afl-app/img/5F7692DF61364E1C89F0DE10D4508337.png'
		}, {
			path: '/pages/invoices/singleProductionReturn',
			text: t('materials.simpleProductionReturn'),
			imgPath: baseUrl + '/afl-app/img/B67B4A27A3B74DDE86A11DAB74A66AEF.png'
		}],

		list: [],
		page: 1,
		rows: 1,
		inventoryList: [],
		// 图表相关的样式
		ringChartData: {}, //饼图
		lineChartData: {}, //折现图
		ringOpts: {
			rotate: false,
			rotateLock: false,
			color: ["#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#1890FF",
				"#ea7ccc"
			],
			dataLabel: true,
			legend: {
				show: true,
				position: "left",
				lineHeight: 30,
				fontSize: 12
			},
			title: {
				name: t('materials.inventoryRatio'),
				fontSize: 12,
				color: "#666666"
			},
			subtitle: {
				name: "100%",
				fontSize: 12,
				color: "#7cb5ec"
			},
			extra: {
				ring: {
					ringWidth: 20,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 10,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
					linearType: "custom"
				}
			}
		},
		lineOpts: {
			color: ["#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#1890FF",
				"#ea7ccc"
			],
			padding: [0, 10, 15, 10],
			legend: {
				show: true,
				position: "top",
				lineHeight: 5,
			},
			xAxis: {
				disableGrid: true,
				rotateLabel: true, //是否旋转文字角度
			},
			yAxis: {
				gridType: "dash",
				dashLength: 2,
			},
			extra: {
				line: {
					type: "curve",
					width: 2,
				}
			}
		},
		// 柱状图 数据
		pineTotal: null,
		totalTrusts: null,
		columnList: [],
		columnPerc: [],
		// 折线图数据
		categories: [],
		lineData: [],
		lineTotal: null,
		tQTY: null,
		showPull: true,
		cssText:"420rpx"
	});

	// 跳转页面
	const goPage = (path) => {
		console.log(path)
		navigate({
			url: path
		})
	};

	const goInventory = () => {
		navigate({
			url: '/pages/invoices/stockInquiry'
		})
	}


	onShow(() => {
		getRequestData()
		data.notMsgList = []
		getNotMsg()
		inventory()
		chartLsit()
	})

	onMounted(() => {
		repertoryRingChart();
		repertoryLineChart();
	});

	//下拉刷新
	onPullDownRefresh(()=>{
		getRequestData()
		//data.notMsgList = []
		//getNotMsg()
		inventory()
		chartLsit()
		repertoryRingChart();
		repertoryLineChart();
		uni.stopPullDownRefresh();
	});



	const getRequestData = async () => {
		let userInfo = uni.getStorageSync(USERINFO);
		let parmes = {
			page: data.page,
			rows: data.rows,
			userNameId: userInfo.userNameId
		}
		let res = await listBizMessageByUserNameId(parmes)
		data.noticeHooks = false
		if (data.page === 1) {
			if (res.rows.length == 0) {
				data.noticeHooks = true
			}
			data.list = res.rows
		} else {
			if (data.list.length == res.total) {
				data.noticeHooks = true
			} else {
				data.list = [...data.list, ...res.rows]
			}
		}
	}
	const handelMessage = async (item) => {
		switchTab({
			url: '/pages/annunciate/index'
		})
	}
	const getNotMsg = async () => {
		let parmes = {
			module: '',
		}
		let res = await getNotReadHomeMsg(parmes)
		// console.log(res.data)
		data.notMsgText = res.data.length ? res.data[0].messageContent : ''
		data.notMsgList = res.data || []
		if (!data.notMsgList.length) {
			data.notMsgList = [{
				messageContent: t('pageTranslation.noNewestInfoFor')
			}]
		}
	}
	// 查看更多消息
	const getMore = () => {
		switchTab({
			url: '/pages/annunciate/index'
		})
	}

	// 库存获取
	const inventory = () => {
		getPADIndexData().then(res => {
			if (res.status == 200) {
				// console.log(res.data)
				data.inventoryList = res.data
			}
		})
	}

	const chartLsit = () => {
		// 柱状图
		getPdaReportData().then(res => {
			console.log(res)
			if (res.data == null) {
				return;
			} else {
				data.pineTotal = res.data.sumQTY;
				data.totalTrusts = res.data.totalTrusts;
				data.columnPerc = res.data.codes.map((name, i) => ({
					name,
					"value": Number(res.data.perc[i].toFixed(2))
				}))
			}
		})
		// 折现图的获取
		getPdaLineGraph().then(res => {
			data.lineTotal = res.data.sumQTY;
			data.categories = res.data.date;
			data.lineData = res.data.qty;
			data.tQTY = res.data.tQTY

		});
	}

	//  饼图的数据获取
	const repertoryRingChart = () => {
		setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			let res = {
				series: [{
					data: data.columnPerc
					// data: [{ "name": "一班", "value": 50 }, { "name": "二班", "value": 30 }, { "name": "三班", "value": 20 }, { "name": "四班", "value": 18 }, { "name": "五班", "value": 8 }]
				}]
			};
			data.ringChartData = JSON.parse(JSON.stringify(res));
		}, 500);
	};

	// 山峰图
	const repertoryLineChart = () => {
		setTimeout(() => {
			let res = {
				categories: data.categories,
				series: [{
					name: t('pageTranslation.qtyOfStockOut'),
					data: data.lineData,
				}, ],
			};
			data.lineChartData = JSON.parse(JSON.stringify(res));
		}, 500);
	};

	// 单据查看三角点击事件
	const pulldown = () => {
		// let div = document.getElementById('receipt')
		// let pull = document.getElementById('pulldowns')
		if (data.showPull) {
			// div.style.cssText = "height:auto"
			data.cssText="auto"
			data.showPull = !data.showPull

		} else {
			// div.style.cssText = "height:400rpx"
			data.cssText="420rpx"
			data.showPull = !data.showPull
		}
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
	}

	// 通知的样式
	.not-msg-box {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;

		.not-msg-box-left,
		.not-msg-box-right {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			height: 100rpx;

			image {
				width: 60%;
				height: 60%;
			}

			.image {
				width: 30%;
				height: 30%;
			}
		}

		.swiper-two {
			flex: 1;
			height: 100rpx !important;

			.swiper-item-two {
				line-height: 100rpx;
				height: 100%;
				width: 100%;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				white-space: nowrap; // 默认不换行；
			}
		}
	}

	.inventory {
		margin-bottom: 20rpx;

		// 库存
		.repertory {
			align-items: center;
			width: 100%;
			margin-bottom: 20rpx;
			color: #333;
			background-color: #52B5AD;

			// border-bottom-left-radius: 20rpx;
			// border-bottom-right-radius: 20rpx;
			&_search {
				// height: 120rpx;
				display: flex;
				padding-top: 10rpx;

				&_img {
					height: 80rpx;
					width: 80rpx;
					margin-left: 16rpx;
					display: inline-block;
				}

				&_select {
					flex: 1;
					border: none;
					background-color: rgb(128, 125, 125, .2);
					height: 50rpx;
					margin-right: 40rpx;
					margin-top: 15rpx;
					border-radius: 40rpx;
					display: flex;

					.repertory_select_img {
						height: 30rpx;
						width: 30rpx;
						margin-left: 20rpx;
						margin-top: 10rpx;
					}

					.repertory_search_input {
						flex: 1;
						color: #B0DAD7;
						height: 40rpx;
						font-size: 24rpx;
						line-height: 30rpx;
						margin-left: 10rpx;
						margin-top: 10rpx;
						text-align: left;
						letter-spacing: 3rpx;
						opacity: 1;
					}
				}
			}

			&_amount {
				width: 100%;
				text-align: center;
				margin-bottom: 10rpx;
				color: #fff;

				&_number {
					height: 80rpx;
					font-size: 44rpx;
					line-height: 110rpx;
					letter-spacing: 2rpx;
					font-weight: 600;
				}

				&_title {
					font-size: 28rpx;
					line-height: 60rpx;
					letter-spacing: 4rpx;

				}
			}

			&_monthList {
				width: 100%;
				font-size: 32rpx;
				display: flex;
				padding: 20rpx 0 20rpx 0;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				color: #fff;

				&_left {
					width: 50%;
					border-right: 3rpx #eee solid;
					text-align: center;
				}

				&_right {
					flex: 1;
					text-align: center;
				}

				&_number {
					font-size: 40rpx;
					line-height: 40rpx;
					font-weight: 600;
					letter-spacing: 2rpx;
				}

				&_title {
					font-size: 24rpx;
					letter-spacing: 4rpx;
				}
			}
		}

		//  图标样式
		&_icons {
			// height: 480rpx;
			// width: 100%;
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			overflow: hidden;

			&_list {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;
			}

			&_item {
				width: 33.3%;
			}

			&_img {
				display: block;
				width: 90rpx;
				height: 90rpx;
				border-radius: 20rpx;
				margin: 0 auto;
				box-sizing: border-box;
			}

			&_desc {
				height: 60rpx;
				margin: 10rpx 0 10rpx 0;
				text-align: center;
				font-size: 28rpx;
				letter-spacing: 2rpx;
				color: #111111;
			}
		}
	}

	// 单据查看样式
	.receipts {
		background: #fff;
		width: 100%;
		height: 420rpx;
		margin-top: 20rpx;
		color: #333;
		border-radius: 20rpx;
		overflow: hidden;

		&_header {
			height: 60rpx;
			padding-left: 40rpx;
			font-size: 30rpx;
			line-height: 70rpx;
			letter-spacing: 2rpx;
			color: #111111;
			font-weight: 600;
			margin-bottom: 20rpx;
			font-family: "微软雅黑";
			display: flex;
			flex-direction: row;
			position: relative;

			&_title {
				height: 100%;
				width: 60%;
			}

			&_pulldown {
				flex: 1 1 auto;
			}

			.receipts_header_pulldown::after {
				content: "";
				position: absolute;
				top: 24rpx;
				right: 40rpx;
				width: 14rpx;
				height: 14rpx;
				border-right: 2rpx solid #000000;
				border-bottom: 2rpx solid #000000;
				transform: rotate(45deg);
				transition: all 0.3s;
			}

			.receipts_header_pulldown:hover::after {
				transform: rotate(225deg);
			}
		}

		&_card {
			display: flex;
			flex-wrap: wrap;

			&_item {
				width: 30%;
				margin: 10rpx;
				text-align: center;
			}

			&_icon {
				display: block;
				width: 90rpx;
				height: 90rpx;
				border-radius: 20rpx;
				margin: 0 auto;
				box-sizing: border-box;
			}

			&_topic {
				text-align: center;
				font-size: 28rpx;
				letter-spacing: 2rpx;
				color: #111111;
				line-height: 60rpx;
			}
		}
	}

	// 图表样式
	.chart {
		background: #fff;
		margin-bottom: 20rpx;
		overflow: hidden;
		width: 100%;
		margin-top: 20rpx;

		&_title {
			height: 80rpx;
			padding-left: 48rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			font-weight: 600;
		}

		&_number {
			height: 60rpx;
			background-color: #abb8d3;
			margin: 0 20rpx 20rpx 50rpx;
			display: flex;

			&_title {
				width: 240rpx;
				line-height: 60rpx;
				text-align: left;
				font-size: 26rpx;
				margin-left: 20rpx;
			}

			&_desc {
				flex: 1;
				line-height: 60rpx;
				text-align: right;
				font-size: 26rpx;
				margin-right: 20rpx;
			}
		}

		&_picture {
			height: 360rpx;
			margin: 0 40rpx 0 46rpx;
		}
	}
</style>
